<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>state use</title>
</head>
<body>
<div id="test"></div>
<div id="test2"></div>

<script src="js/react.development.js" crossorigin></script>
<script src="js/react-dom.development.js" crossorigin></script>
<script src="js/babel.js"></script>

<!--复习JS-稍微繁琐的写法-->
<script type="text/babel">

    class ClassComponent extends React.Component {

        constructor(props) {
            super(props);
            // 初始化状态
            this.state = {isHost: true, name: 'LiSi'};
            // 解决click()方法中this指向问题
            this.clickPer = this.click.bind(this);
        }

        click() {
            // 修改state需要调用setState方法，直接this.state.isHost确实会更新，但react不会变
            this.setState({isHost : !this.state.isHost})
        }

        render() {
            let name = this.state.name;
            return (
                <div>
                    <h1 onClick={this.clickPer}> {name} ! 今天天气很 {this.state.isHost ? 'Hot' : 'Cold'}～ ～ </h1>
                    <button type="button" onClick={this.clickPer}>按钮点击</button>
                </div>
            )
        }
    }

    ReactDOM.render(<ClassComponent/>, document.getElementById("test"));

</script>

<!--State精简写法-->
<script type="text/babel">

    class SimpleComponent extends React.Component {
        // 初始化状态
        state = {isHost: true, name: 'LiSi'};
        // 自定义方法 -- 赋值语句+箭头函数
        click = () => {
            // 修改state需要调用setState方法，直接this.state.isHost确实会更新，但react不会变
            this.setState({isHost: !this.state.isHost})
        }

        render() {
            let name = this.state.name;
            return (
                <div>
                    <h1 onClick={this.click}> {name} ! 今天天气很 {this.state.isHost ? 'Hot' : 'Cold'}～ ～ </h1>
                    <button type="button" onClick={this.click}>按钮点击</button>
                </div>
            )
        }
    }

    ReactDOM.render(<SimpleComponent/>, document.getElementById("test2"));

</script>
</body>
</html>